<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,shrink-to-fit=no"
    />
    <title>Show 3D shapes WebGL</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
      }

      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>

    <script
      src="../packages/g/dist/index.umd.min.js"
      type="application/javascript"
    ></script>
    <script
      src="../packages/g-webgl/dist/index.umd.min.js"
      type="application/javascript"
    ></script>
    <script
      src="../packages/g-plugin-3d/dist/index.umd.min.js"
      type="application/javascript"
    ></script>
    <script
      src="../packages/g-plugin-control/dist/index.umd.min.js"
      type="application/javascript"
    ></script>
    <script>
      const { Canvas, CanvasEvent } = window.G;
      const { MeshBasicMaterial, CubeGeometry, Mesh, Plugin } = window.G['3D'];
      const webglRenderer = new window.G.WebGL.Renderer();

      webglRenderer.registerPlugin(new Plugin());
      webglRenderer.registerPlugin(new window.G.Control.Plugin());

      const canvas = new Canvas({
        container: 'container',
        width: 600,
        height: 500,
        renderer: webglRenderer,
      });

      (async () => {
        await canvas.ready;
        const plugin = webglRenderer.getPlugin('device-renderer');
        const device = plugin.getDevice();
        const map = plugin.loadTexture(
          'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*8TlCRIsKeUkAAAAAAAAAAAAAARQnAQ',
        );

        const cubeGeometry = new CubeGeometry(device, {
          width: 200,
          height: 200,
          depth: 200,
        });
        const basicMaterial = new MeshBasicMaterial(device, {
          // wireframe: true,
          map,
        });

        const cube = new Mesh({
          style: {
            fill: '#1890FF',
            opacity: 1,
            geometry: cubeGeometry,
            material: basicMaterial,
          },
        });

        cube.setPosition(300, 250, 0);

        canvas.appendChild(cube);

        canvas.on(CanvasEvent.AFTER_RENDER, () => {
          cube.rotate(0, 1, 0);
        });
      })();
    </script>
  </body>
</html>
